<template>
  <view class="page">
    <view class="top-background-raduis"> </view>
    <view class="login-box">
      <view class="login-card-title">
        <view v-if="id == -1" class="login-card-title-content"> 新增 </view>
		<view v-else class="login-card-title-content"> 修改 </view>
      </view>
      <view class="login-card-input">
        <!-- 输入框头部图标 -->
        <uni-easyinput
          class="hj-input"
          v-model="title"
          focus
          maxlength="30"
          :trim="true"
          @focus="UserNamePassWrodFocusBorderStyle"
          :styles="inputColorConfigToUserName"
          @blur="UserNamePassWrodBlurBorderStyle"
          placeholder="请输入标题"
        ></uni-easyinput>
        
		<!-- 输入框头部图标 -->
		<uni-easyinput
		  class="hj-input"
		  v-model="content"
		  focus
		  maxlength="30"
		  :trim="true"
		  @focus="UserNamePassWrodFocusBorderStyle"
		  :styles="inputColorConfigToUserName"
		  @blur="UserNamePassWrodBlurBorderStyle"
		  placeholder="请输入内容"
		></uni-easyinput>
      </view>
      <view class="login-card-loginIn">
        <view v-if="id == -1" class="login-card-loginIn-btn" v-on:click="create()">
          保 存
        </view>
		<view v-else class="login-card-loginIn-btn" v-on:click="update()">
		  修 改
		</view>
      </view>
    </view>
  </view>
</template>

 
<script>
//import {  } from "@/common/api/{$}.js";
export default {
  data() {
    return {
      // 输入框边框颜色默认值
      colorDefault:'#b4b4b4',
      // 输入框边框聚焦值
      colorFocusColor:'#3cb79a',
      // 输入框颜色配置
      inputColorConfigToUserName: {
        color: "#000000",
        disableColor: "#eee",
        borderColor: "#b4b4b4",
      },
      // 输入框颜色配置
      inputColorConfigToPassWord: {
        color: "#000000",
        disableColor: "#eee",
        borderColor: "#b4b4b4",
      },
      title: "",
	  content: "",
	  id: 0
    };
  },
  created() {},
  onLoad:function(option){
  	this.title = option.title
	this.content = option.content
	this.id = option.id
  },
  methods: {
    // 输入框聚焦变换边框样式
    UserNamePassWrodFocusBorderStyle(){
      this.inputColorConfigToUserName.borderColor
      = this.colorFocusColor;
    },
    PassWordFocusBorderStyle(){
      this.inputColorConfigToPassWord.borderColor
      = this.colorFocusColor;
    },
    // 输入框失去焦点变换边框样式
    UserNamePassWrodBlurBorderStyle(){
      this.inputColorConfigToUserName.borderColor
      = this.colorDefault;
    },
    PassWordBlurBorderStyle(){
      this.inputColorConfigToPassWord.borderColor
      = this.colorDefault;
    },
	update() {
		uni.request({
			url:this.$baseUrl + '/positing/update',
			data:{
				id:parseInt(this.id),
				title: this.title,
				content: this.content
			},
			method:'POST',
			header:{
				'Content-Type': 'application/json;charset=UTF-8',
				'token': uni.getStorageSync("token")
			},
			success: (res) => {
				console.log(res.data)
				if (res.data.code === "0000") {
					alert("更新成功")
					uni.navigateBack({
						delta:2
					})
				}else if (res.data.code === "4000") {
					alert("请重新登录")
					uni.switchTab({
						url:'../logic/login'
					})
				}else {
					alert("更新失败"+ res.data.message)
					uni.navigateBack({
						delta:2
					})
				}
			}
		})
	},
	create() {
		uni.request({
			url:this.$baseUrl + '/positing/create',
			data: {
				title: this.title,
				content: this.content
			},
			method:'POST',
			header:{
				'Content-Type': 'application/json;charset=UTF-8',
				'token': uni.getStorageSync("token")
			},
			success: (res) => {
				if (res.data.code === "0000") {
					alert("新增帖子成功")
					uni.navigateBack({
						delta:1
					})
				}else if (res.data.code === "4000") {
					alert("请重新登录")
					uni.switchTab({
						url:'../logic/login'
					})
				} else {
					alert("新增帖子失败" + res.data.message)
				}
			}
		})
	}
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.page {
  position: relative;
  height: 100vh;
}
.top-background-raduis {
  height: 30%;
  background-color: #d8d8d8;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
/deep/ .is-input-border{
  border-radius: 7px !important;
}
/deep/ .uni-easyinput__content{
  min-height: 39px !important;
}
.hj-input {
  margin-top: 15rpx;
  padding-top: 50rpx;
}
.hj-input:nth-child(2) {
  margin-top: 35rpx;
}
.login-box {
  top: 20%;
  position: absolute;
  width: 80%;
  left: 10%;
  right: 10%;
  height: 650rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 40rpx;
  box-shadow: 9px 9px 6px #e3e3e3;
  .login-card-input {
    // background-color: violet;
    height: 50%;
    padding: 5rpx;
  }
  .login-card-title {
    height: 20%;
    // background-color: black;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    .login-card-title-content {
      font-size: 1.2em;
      color: #3cb79a;
      border-bottom: 3px solid #3cb79a;
    }
  }
  .login-card-loginIn{
    height: 25%;
    display: flex;
    justify-content: center;
    padding: 10rpx;
	padding-top: 50rpx;
    align-items: center;
    .login-card-loginIn-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3cb79a;
      width: 100%;
      font-size: 1.2em;
      height: 80%;
      border-radius: 40rpx;
      color: white;
    }
  }
  .login-bottom-info{
    height: 5%;
    display: flex;
    font-size: 0.7em;
    color: #3cb79a;
    justify-content: end;

  }
}
.bottom-message{
  position: absolute;
  height: 70rpx;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
  overflow: hidden;
  color: #969898;
  bottom: 40rpx;
}
</style>